<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        /*遮罩层*/

        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }

        .z_alert {
            width:75%;
            height: 150px;
            border-radius: .2rem;
            background: rgba(249, 249, 249, 0.98);
            font-size:15px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        input{
            border-bottom:1px solid #ddd;
            color: #484848;
            width:40%;
            background: transparent;
        }
        .btn-r{
            background-color: #26a79b;
            height: 53px;
            width: 53px;
            border-radius: 100%;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
        }
        .btn-i{
            background-color: #26a79b;
            height: 53px;
            width: 80px;
            border-radius: 100%;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
        }
        .btn-c{
            background-color: #96add0;
            height: 33px;
            width: 50px;
            border-radius: 30px;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
            font-size: 12px;
        }
        .btn-f{
          background-color: #e8c40d;
            height: 33px;
            width: 50px;
            border-radius: 30px;
            display:flex;
            box-sizing: border-box;
            color: #18530b;
            font-weight: bold;
            padding-right: 2px;
            font-size: 12px;
        }
        #address{
            position: absolute;
            z-index: 100;
            width: 94%;
            top:42px;
            margin:0 10px  0 11px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: 0;
        }
        #myPageTop{
            position: absolute;
            z-index: 100;
            width: 94%;
            height: 32px;
            right: 0px;
            line-height: 32px;
            top:10px;
            margin:0 10px ;
            background: #fff;
            border-bottom: 0;
            padding: 0;
        }

        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        .price{
            font-size: 12px;
            color: #fb5212;
            display:none;
            position: absolute;
        }
        .amap_lib_placeSearch_poi{
            display: none;
        }
          .amap-icon img{
            width: 30px;
        }
    </style>
</head>
<body style="font-family: 微软雅黑">

<div  id="map" style="overflow:hidden">
    <div id="myPageTop">
        <label style="margin: 0"><span class="fa fa-map-marker" style="margin: 0 10px;color: #2f44f9"></span>起：</label>
        <input id="tipinput" style="height: 30px;width: 70%" readonly/>
    </div>
    <div id="address" >
        <label style="color: #666666;font-size: 14px"><span class="fa fa-map-marker" style="margin: 0 10px;color: #ff5a19"></span>终：</label>
        <input id="tipinput1" style="height: 30px;width: 70%;font-size: 14px;border: 0;" readonly />
    </div>
    <div id="container" style=""></div>
    <div id="tip"></div>
    <div id="panel" style="display: none"></div>
     <div class="button-group" style="display:none;">
        <input id="setFitView" class="button" type="button" value="地图自适应显示"/>
    </div>
    <div class="info-tip">
        <div id="centerCoord"></div>
        <div id="tips"></div>
    </div>
    <div style="position:fixed;bottom: 10px;left: 45%;" id="canCf"><button class="btn-i" >取消召唤</button></div>
    <div style="position:fixed;bottom: 15px;left:20px;" id="canb" onclick="history.back();"><button class="btn-f"  >返回</button></div>
</div>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script type="text/javascript" src="../../myJs/jquery-1.12.1.min.js" ></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a37424dd342449fb8ab5f809081e01ce&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Riding"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var addressLongitude,addressLatitude,addr,purchaseLatitude,purchaseLongitude,purchasePlace;
    $(function(){
        addressLongitude = sessionStorage.getItem("addressLongitude");
        addressLatitude = sessionStorage.getItem("addressLatitude");
        purchaseLongitude =sessionStorage.getItem("purchaseLongitude");
        purchaseLatitude = sessionStorage.getItem("purchaseLatitude");
        alert(purchaseLatitude);
        addr =sessionStorage.getItem("addr");
        purchasePlace = sessionStorage.getItem("purchasePlace");
        $("#tipinput1").val(addr);
        $("#tipinput").val(purchasePlace);
        map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:14,
            center: [120.200268,30.248318]
        });
        //骑行导航
        var riding = new AMap.Riding({
            map: map,
            panel: "panel"
        });
        //根据起终点坐标规划骑行路线
        riding.search([purchaseLongitude,purchaseLatitude],[addressLongitude,addressLatitude]);
       
        map.clearMap();  // 清除地图覆盖物
        var markers = [{
            icon: '../../myImage/l6.png',
            position: [120.343399,30.32076]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.34666,30.313498]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.342111,30.306163]
        },{
            icon: '../../myImage/l6.png',
            position: [120.325718,30.298752]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.316105,30.301865]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.373354,30.314091]
        },{
            icon: '../../myImage/l6.png',
            position: [120.363912,30.313869]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.381508,30.303347]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.390091,30.300644]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.386271,30.313647]
        }, {
            icon: '../../myImage/l6.png',
            position: [120.383052,30.308497]
        }];
        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
        markers.forEach(function(marker) {
            new AMap.Marker({
                map: map,
                icon: marker.icon,
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(-12, -36),
            });
        });
        var center = map.getCenter();
        var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
        document.getElementById('centerCoord').innerHTML = centerText;
        document.getElementById('tips').innerHTML = '成功添加三个点标记，其中有两个在当前地图视野外！';

        // 添加事件监听, 使地图自适应显示到合适的范围
        AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
            var newCenter = map.setFitView();
            document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
            document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
        });
     
    })
    

    $("#canb").on("click", function () {
        location.href="../helpBuy/receivedOrder.html";
    })
</script>
</body>
</html>